<template>
  <div class="skeleton-wrapper">
    <div class="skeleton1"></div>
    <div class="skeleton2">
      <div class="inner1"></div>
      <div class="inner2"></div>
    </div>
    <div class="skeleton3">
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>
    <div class="skeleton4"></div>
    <div class="skeleton5">
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>
    <div class="skeleton6">
      <div class='inner-left'></div>
      <div class='inner-right'>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="skeleton7">
      <div class="inner1"></div>
      <div class="inner2"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'skeleton'
  };
</script>

<style lang="scss" scoped>
  @import url(~normalize.css);
  .skeleton1 {
    width: 100%;
    height: 0.58rem;
    background: rgba(230, 230, 230, 1);
  }
  
  .skeleton2 {
    width: 100%;
    height: 0.48rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .inner1 {
      height: 0.38rem;
      width: 3.18rem;
      background: rgba(240, 240, 240, 1);
      border-radius: 0.19rem;
    }
    .inner2 {
      height: 0.24rem;
      width: 0.24rem;
      background: rgba(240, 240, 240, 1);
      margin-left: 0.1rem;
    }
  }
  
  .skeleton3 {
    width: 100%;
    height: 0.48rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .inner {
      width: 0.38rem;
      height: 0.28rem;
      background: rgba(220, 220, 220, 1);
    }
  }
  
  .skeleton4 {
    width: 100%;
    height: 1.25rem;
    background: rgba(240, 240, 240, 1);
  }
  
  .skeleton5 {
    width: 100%;
    height: 0.83rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.2rem;
    .inner {
      width: 0.6rem;
      height: 0.7rem;
      background: rgba(240, 240, 240, 1);
    }
  }
  
  .skeleton6 {
    border-top: 0.01rem solid rgba(239, 236, 236, 1);
    height: 0.58rem;
    padding: 0.08rem 0.13rem;
    display: flex;
    .inner-left {
      width: 0.35rem;
      height: 0.35rem;
      background: rgba(220, 220, 220, 1);
    }
    .inner-right {
      flex: 1;
      margin-left: 0.1rem;
      >div {
        width: 100%;
        height: 0.16rem;
        background: rgba(240, 240, 240, 1);
        &:first-child {
          margin-bottom: 0.03rem;
        }
      }
    }
  }
  
  .skeleton7 {
    padding:0.1rem 0.13rem;
    .inner1 {
      height: 0.28rem;
      width:100%;
      background: rgba(220, 220, 220, 1);
    }
    .inner2{
      width:100%;
      height:1.75rem;
      background: rgba(240, 240, 240, 1);
      margin-top:0.06rem;
    }
  }
</style>
